<template>
  <!-- <div>害虫数量</div> -->
  <SubTitle>
        <template #subtitle>害虫数量</template>
      </SubTitle>
  <div ref="numberofpests" class="numberofpests">

  </div>
</template>

<script>
import '../../api.js'
import '../../assets/js/common.js'
import * as echarts from 'echarts'
import SubTitle from './SubTitle.vue';
import { getpesttype } from '../../api.js';
import { changestring } from '../../assets/js/common.js';
export default {
  components:{
    SubTitle
  },
  data(){
    return {
      timearr:[],
      pestNumber:[],
    }
  },

  created(){
    this.Getpesttypes();
    },
  methods:{
    async Getpesttypes() {
           await getpesttype("/insect_condition/petNum")
            .then((Response) => {
              //console.log("R",Response.data);
              var timeArr = new Array();
              var pestnumber = new Array();
              for(let i=0;i<Response.data.length;i++){

                timeArr[i] = Response.data[i].date;
                var pesttypes = changestring(Response.data[i].detail);
                var number = 0;
                for(let j =0;j<pesttypes.length;j++){
                  
                  number = number + Number(pesttypes[j].value);
                }
                pestnumber[i] = number;
                //console.log("pest",pesttypes);
                // this.datas = pesttypes;
              }
              this.timearr = timeArr;
              //console.log("pernum",pestnumber);
              this.pestNumber = pestnumber;
              // setTimeout(() => {
              //   console.log("time111111",this.timearr);
              // }, 100);
             
            });
        },
  },
    mounted(){
   setTimeout(() => {
    let numberofpeats =  echarts.init(this.$refs.numberofpests);
   let xData = this.timearr;
   // ['3月','4月','5月','6月','7月','6月','7月'];
   let yData = this.pestNumber;
   //[22,20,35,40,30,40,30];
   let option = {
    title:{
      text:'',
    },
    xAxis:{
      data:xData,
      inverse:true,
      type:'category', //value 数据轴，category 类目轴
      axisLabel:{
        interval:0,
        color:'yellow',
        fontSize:"14px"
      }
    },
    yAxis:{
      splitArea: {  //隐藏背景网格区域
            show: false
        },
        axisLabel:{
          show:false
        },
        splitLine: {  //隐藏背景网格线
            show: false
        },
        axisTick: {
            show: false //隐藏刻度线  
        },
        axisLine:{      //隐藏y轴
            show:false
        }
    },
    series:[
    {//图表类型
      name:'',
      type:'bar',//图表类别
      data:yData,
      barWidth:40,

      label:{
        show:true,
        position:'top'
      },
      barBorderRadius: [2, 2, 0, 0], //柱体圆角   
                    color: new echarts.graphic.LinearGradient(
                        //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                        //通过修改前4个参数，可以实现不同的渐变方向
                        /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                        0, 0, 0, 1, [{//代表渐变色从正上方开始
                                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                                color: '#005BEA'
                            }, //柱图渐变色
                            {
                                offset: 1, //指100%处的颜色
                                color: '#00C6FB'
                            }
                        ]
                    ),
                
    }

    ]
   
};
numberofpeats.setOption(option);
   }, 1000);

}}

</script>

<style lang="less" scoped>
.numberofpests{
    width:100%;height:290px;
}
@media screen and (max-width: 720px) {
    .numberofpests{
      width: 100%;
      height: 300px;
    }
  }
</style>